<template>
  <view class="page-body" :style="'height:' + height + 'rpx'">
    <scroll-view
      class="nav-left"
      scroll-x="true"
      :scroll-top="scrollLeftTop"
      scroll-with-animation
    >
      <view
        class="nav-left-item"
        @click="categoryClickMain(item.id, index)"
        :key="item.id"
        :class="item.id == categoryActive ? 'active' : ''"
        v-for="(item, index) in classifyData"
      >
        {{ item.title || "" }}
      </view>
    </scroll-view>
	
    <view class="nav-right">
      <!-- <scroll-view scroll-x class="ta-bg">
        <view class="ta-box">
          <view
            class="tag"
            :class="{ active: v.id == sonActive }"
            v-for="(v, i) in sonData"
            :key="v.id"
            @click="categoryClickSon(v, i)"
          >
            {{ v.title }}
          </view>
        </view>
      </scroll-view> -->
      <view class="sort">
        <view class="so-text" @click="tabSalesVolumeSort">
          <text>销量</text>
          <image
            v-if="apiParams.salesVolumeSort == 0"
            class="ic-arrow"
            src="/static/common/arrow.png"
            mode=""
          >
          </image>
          <image
            v-else-if="apiParams.salesVolumeSort == 1"
            class="ic-arrow s2"
            src="/static/common/arrow2.png"
            mode=""
          ></image>
          <image
            v-else-if="apiParams.salesVolumeSort == 2"
            class="ic-arrow s2"
            src="/static/common/arrow3.png"
            mode=""
          ></image>
        </view>
        <view class="so-text" @click="tabPriceSort">
          <text>价格</text>
          <image
            v-if="apiParams.priceSort == 0"
            class="ic-arrow"
            src="/static/common/arrow.png"
            mode=""
          >
          </image>
          <image
            v-else-if="apiParams.priceSort == 1"
            class="ic-arrow s2"
            src="/static/common/arrow2.png"
            mode=""
          >
          </image>
          <image
            v-else-if="apiParams.priceSort == 2"
            class="ic-arrow s2"
            src="/static/common/arrow3.png"
            mode=""
          >
          </image>
        </view>
      </view>
      <c-scroll-list
        totalKey="total"
        :option="{ auto: false, offsetBottom: 10 }"
        ref="list"
        :api-params="apiParams"
        @load="(result) => (list = result.list)"
        :api="api"
      >
	  <template #default>
        <view class="box">
          <view
            class="nav-right-item"
            v-for="(v, i) in list"
            :key="i"
            @click="cart(v)"
          >
            <u-image
              :src="v.cover"
              width="310rpx"
              height="310rpx"
              radius="3px"
            >
            </u-image>
            <view class="goods-info">
              <view class="go-name"><view class="goods-tag" v-for="item in v.labelList">{{item}}</view>{{ v.title }}</view>
              <view class="go-df">
                <view
                  class=""
                  style="display: flex; align-items: center"
                >
                  <view class="go-integral mr"
                    >￥<text>{{ v.memberPrice }}</text></view
                  >
                  <view class="sh-old mr">
					  <view style="position: absolute; top: -14rpx;text-decoration: line-through">
						  ￥<text>{{ v.price }}</text>
					  </view>
				  </view>
                </view>
				<view class="go-sold" style="position: relative;bottom: -4rpx;">已售: {{ convertNumber(v.sellCount) }}</view>
                <!-- <view v-if="type == 1" class="go-pay">立即购买</view>
                <view v-else class="go-control">
                  <view
                    v-if="!v.isOnSale"
                    class="listing"
                    @click="updateGoodsStatusFn(v, 1)"
                    >上架</view
                  >
                  <view v-else class="delist" @click="updateGoodsStatusFn(v, 0)"
                    >下架</view
                  >
                  <view
                    class="edit"
                    @click="
                      $fn.jumpPage(
                        '/pages/shop/pages/editorialGoods?id=' + v.id
                      )
                    "
                    >编辑</view
                  >
                </view> -->
              </view>
            </view>
          </view>
        </view>
		</template>
      </c-scroll-list>
    </view>
  </view>
</template>

<script>
export default {
  name: "d-classify",
  props: {
    api: {
      type: Function,
      required: true,
    },
    // apiParams: {
    // 	type: Object,
    // 	default: () => ({}),
    // },
    keywords: {
      type: String,
      default: "",
    },
    category: {
      type: String,
      default: "",
    },
    type: {
      type: Number,
      default: 1,
    },
    scrHeight: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      height: 0,
      categoryActive: -2,
      sonActive: -1,
      scrollTop: 0,
      scrollLeftTop: 0,
      // scrollHeight: 0,
      classifyData: [
        /** {
          createTime: "2023-12-22 11:23:12",
          crownDiscounts: 100,
          delFlag: 0,
          fatherId: "0",
          id: "2",
          level: 1,
          ordinaryDiscounts: 100,
          picture:
            "https://test.mufengweilai.com/api/minio/hdtg/2023/12/22/87082ae6daac417b84e9ccae7f080773.jpg",
          sort: 1,
          title: "限时限量",
          updateTime: "2024-01-08 11:32:49",
        },*/
        // {
        //   createTime: "2023-12-22 11:23:12",
        //   crownDiscounts: 100,
        //   delFlag: 0,
        //   fatherId: "0",
        //   id: "1",
        //   level: 1,
        //   ordinaryDiscounts: 100,
        //   picture:
        //     "https://test.mufengweilai.com/api/minio/hdtg/2023/12/22/87082ae6daac417b84e9ccae7f080773.jpg",
        //   sort: 1,
        //   title: "今日特价",
        //   updateTime: "2024-01-08 11:32:49",
        // },
      ],
      sonData: [],
      arr: [], //初始值，后边计算会根据手机适配覆盖
      leftItemHeight: uni.upx2px(120), //49行会计算出新值进行覆盖
      tabBarHeight: 90, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
      list: [],
      // base: this.$u.http.config.imgUrl,
      apiParams: {
        categoryId: "1",
        goodsName: "",
        salesVolumeSort: 0,
        priceSort: 0,
        search: "",
        sotSales: 1,
        userId: uni.getStorageSync("user").userId,
      },
      volumeValue: 0,
      oldId: 0,
      userType: 0,
    };
  },
  watch: {
    keywords: {
      handler(newValue) {
        this.apiParams.search = newValue;
      },
    },
    category: {
      handler(newValue) {
        if (newValue) {
          this.categoryActive = newValue;
        }
      },
    },
  },
  created() {
    //如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
    this.apiParams.search = this.keywords;
    this.getGoodsTypes();
    let lifeData = uni.getStorageSync("lifeData");
    if (lifeData) {
      this.getMembership();
    }
  },
  mounted() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync();
    console.log(systemInfo, "systemInfo.platform");
    let tabBarHeight; // TabBar的高度
    if (systemInfo.osName === "ios") {
      if (systemInfo.statusBarHeight > 20) {
        // iOS13及以上版本，适配安全区域
        const safeAreaTop =
          systemInfo.safeArea && systemInfo.safeArea.top
            ? systemInfo.safeArea.top
            : 44;
        tabBarHeight =
          systemInfo.screenHeight - systemInfo.windowHeight + safeAreaTop;
      } else {
        // iOS9~12版本，未适配安全区域
        tabBarHeight = systemInfo.screenHeight - systemInfo.windowHeight;
      }
    } else if (systemInfo.platform === "android") {
      // Android平台
      tabBarHeight = systemInfo.bottomSafeArea || 0;
    }
    console.log(
      "TabBar的高度为",
      tabBarHeight,
      systemInfo.screenHeight,
      wx.getMenuButtonBoundingClientRect().height
    );
    this.height =
      (systemInfo.screenHeight -
        tabBarHeight -
        wx.getMenuButtonBoundingClientRect().height) *
      2;
    console.log(this.height, "this.height");
  },
  onShow() {
    setTimeout(() => {
      this.$refs.list.initList(true);
    });
  },
  methods: {
	  // 销量取整
	  convertNumber(num) {
	      if (num === 0) {
	          return 0;
	      }
	      let magnitude = Math.floor(Math.log10(Math.abs(num)));
	      let highestDigit = Math.floor(Math.abs(num) / Math.pow(10, magnitude));
	      return highestDigit * Math.pow(10, magnitude) + '+';
	  },
    // 获取会员等级
    getMembership() {
      this.$api.getUserTypeY().then((res) => {
        // this.userType = res.data;
        this.userType = 1;
      });
    },

    // 切换销量
    tabSalesVolumeSort() {
      if (this.apiParams.salesVolumeSort <= 1) {
        this.apiParams.salesVolumeSort++;
      } else {
        this.apiParams.salesVolumeSort = 0;
      }
      this.refresh();
    },
    // 切换价格
    tabPriceSort() {
      if (this.apiParams.priceSort <= 1) {
        this.apiParams.priceSort++;
      } else {
        this.apiParams.priceSort = 0;
      }
      this.refresh();
    },
    refresh() {
      this.$refs.list.refresh();
    },
    initList() {
      this.$refs.list.initList();
    },
    // 获取数据分类
    getGoodsTypes() {
      this.$api
        .waresTypeMenu({
          type: 2,
          userId: uni.getStorageSync("user").userId,
        })
        .then((res) => {
          console.log("res12333333", res);
          this.classifyData = [...this.classifyData, ...res.data];
          let index = 0;
          this.classifyData.forEach((v, i) => {
            if (this.category == v.id) {
              index = i;
            }
          });
          let id = this.category || this.classifyData[0].id;
          this.categoryClickMain(id, index);
        });
    },
    // 选择一级分类
    categoryClickMain(id, inx) {
      if (id == -2) {
        this.apiParams.sotSales = 1;
        // this.apiParams.categoryId = "";
      } else {
        this.apiParams.sotSales = "";
        this.apiParams.categoryId = id;
      }
      this.categoryActive = id;
      this.apiParams.type = 1;
      // this.apiParams.categoryId = id
      this.oldId = id;
      this.sonData = this.classifyData[inx].secondaryMenu;
      this.sonActive = -1;
      this.refresh();
    },
    // 选择二级分类
    categoryClickSon(val, inx) {
      console.log("val", val);
      if (this.sonActive != val.id) {
        this.sonActive = val.id;
        this.apiParams.categoryId = val.id;
      } else {
        this.sonActive = -1;
        this.apiParams.categoryId = this.oldId;
      }
      this.refresh();
    },
    // 触发点击事件
    cart(goods) {
      this.$emit("click", goods);
    },
    // 商品上架
    async updateGoodsStatusFn(v, status) {
      const {
        data: { data },
      } = await this.$u.api.updateGoodsStatus({
        id: v.id,
        status,
      });
      this.refresh();
      console.log("data", data);
    },
    // 截取指定字符前
    substrStr(str) {
      let res = str;
      if (str.indexOf(",") != -1) {
        let index = str.indexOf(",");
        res = str.substring(0, index);
      }
      if (str.indexOf("http") == -1) {
        res = this.$u.http.config.imgUrl + res;
      }
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
.sort {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 0;

  .so-text {
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    margin-right: 64rpx;
  }

  .ic-arrow {
    width: 14rpx;
    height: 8rpx;
    margin-left: 12rpx;

    &.s2 {
      height: 22rpx;
    }
  }
}

.page-body {
  // display: flex;
  background: #fff;
  overflow: hidden;
}

.nav {
  display: flex;
  width: 100%;
}

.nav-left {
  // width: 200rpx;
  // height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  white-space: nowrap;
}

/deep/ ::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}

.nav-left-item {
  display: inline-block;
  // width: 200rpx;
  // height: 120rpx;
  border-bottom: solid 1rpx #e6e6e6;
  font-size: 28rpx;
  color: #alala1;
  padding: 5px;
  background: #ededed;
  margin-left: 10rpx;
  border-radius: 10rpx;
}

.nav-left-item:first-child {
	margin-left: 20rpx;
}

.nav-left-item:last-child {
  border-bottom: none;
  margin-right: 20rpx;
}

.nav-right {
  // width: 550rpx;
}

.box {
  display: block;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
  padding-top: 0;
  /*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
}

.ta-bg {
  width: 550rpx;
  overflow-x: scroll;

  .ta-box {
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-wrap: nowrap;
    // width: 100%;

    .tag {
      padding: 12rpx;
      background: #f0f0f0;
      border-radius: 6rpx;
      font-size: 24rpx;
      color: #666666;
      display: inline-block;
      margin-right: 16rpx;
      white-space: nowrap;

      &.active {
        background: #ff8326;
        color: #fff;
      }
    }
  }
}

.box:last-child {
  border: none;
}

.nav-right-item {
  border-bottom: 1rpx solid #e6e6e6;
  text-align: center;
  padding: 22rpx 20rpx 20rpx;
  font-size: 28rpx;
  background: #f3f3f3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22rpx;
  border-radius: 3px;
  margin-top: 10rpx;
}

.goods-info {
  flex: 1;
  font-size: 32rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 38rpx;
  -webkit-background-clip: text;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 310rpx;
  margin-top: 10rpx;

  .go-name {
    font-size: 28rpx;
    color: #1a1a1a;
    line-height: 38rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .go-sold {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
  }

  .go-df {
    display: flex;
    align-items: center;
    justify-content: space-between;
	margin-top: 20rpx;

    .go-integral {
      font-size: 24rpx;
      font-weight: bold;
      color: #ea0d1d;
      line-height: 23rpx;

      // &.mr {
      // 	margin-right: 66rpx;
      // }

      text {
        font-size: 40rpx;
        display: inline-block;
        margin-right: 8rpx;
      }
    }

    .sh-old {
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
      line-height: 36rpx;
      text-decoration: line-through;
	  position: relative;
      // margin-left: 6rpx;
    }

    .go-pay {
      width: 112rpx;
      height: 40rpx;
      background: linear-gradient(96deg, #ff9656 0%, #ff4b57 52%);
      border-radius: 24rpx;
      font-size: 20rpx;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      line-height: 38rpx;
    }

    .go-control {
      display: flex;
      align-items: center;

      .listing {
        width: 72rpx;
        height: 36rpx;
        border-radius: 4rpx;
        border: 1rpx solid #4685fd;
        font-size: 20rpx;
        color: #4685fd;
        line-height: 34rpx;
        text-align: center;
      }

      .delist {
        width: 72rpx;
        height: 36rpx;
        border-radius: 4rpx;
        border: 1rpx solid #fc5d5d;
        font-size: 20rpx;
        color: #fc5d5d;
        line-height: 34rpx;
        text-align: center;
      }

      .edit {
        width: 72rpx;
        height: 36rpx;
        background: #ff8326;
        border-radius: 4rpx;
        font-size: 20rpx;
        color: #fff;
        line-height: 34rpx;
        text-align: center;
        margin-left: 16rpx;
      }
    }

    .go-add {
      width: 36rpx;
      height: 36rpx;
    }

    .ma-integral-divide {
      margin: 0 5px;
    }

    .go-redeem {
      font-size: 20rpx;
      font-weight: 400;
      color: #999999;
      line-height: 23rpx;
    }
  }
}

.nav-right-item image {
  width: 150rpx;
  height: 150rpx;
}

.active {
  // border-left: 8rpx solid #2ad03d;
  // background: linear-gradient(90deg, #d5fbee 0%, #f7f7f7 100%);
  background: #2ad03d;
  border-right: 0;
  // font-size: 30rpx;
  // font-weight: bold;
  color: white;
  position: relative;

  &.after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 12rpx;
    height: 128rpx;
    background: linear-gradient(270deg, #fd6a61 0%, #fc3e3e 90%);
    border-radius: 0rpx 6rpx 6rpx 0rpx;
  }
}

::-webkit-scrollbar {
  /*取消小程序的默认导航条样式*/
  width: 0;
  height: 0;
  color: transparent;
}

.goods-tag {
	display: inline;
	background: #ea6c20;
	margin-right: 8rpx;
	font-size: 21rpx;
	padding: 5rpx 10rpx;
	border-radius: 3px;
	color: white;
}
</style>
